<template>
  <div class="preview_container">
		<div class="preview_head">
			<div class="preview_container_top">
				<span v-for="(item, index) in btnList" :key="index" @click="liChoose(item,index)" :style="{color:item.color ,backgroundColor:item.backgroundColor,width:item.width}">{{item.name}}</span>
			</div>
		</div>
    	<el-table :data="tableData2" border style="width: 100% ;" height="74%" :cell-style="cellStyle" >
			<el-table-column v-for="(item,index) in titleList" :key="index" align="center" :label="item" v-if="item == '整行状态' ? isShowOperation : true" :fixed="item == '#'" :width="item == '#'? 50 : ''">
				<template slot-scope="scope">
						<!-- <div v-if="item =='整行状态'">
							<span v-if="scope.row[item] == 0"></span>
							<span class="isIgnoreBtn" v-if="scope.row[item] == 1" style="color:#47B0FF" @click="ignore(scope.row['#'])">忽略整行</span>
							<span class="isIgnoreBtn" v-if="scope.row[item] == 2" style="color:#FF4200" @click="Revoke(scope.row['#'])">撤销忽略</span>
						</div> -->
						<div v-if="item =='#'">
							<span class="IdentificationInfo">{{scope.row[item]}}</span>
							<span class="IdentificationColor" v-if="scope.row['整行状态'] == 1" style="backgroundColor:#FF591F"></span>
							<span class="IdentificationColor" v-if="scope.row['整行状态'] == 2" style="backgroundColor:#FBE800"></span>
						</div>
						<div v-else>
							<span>{{scope.row[item]}}</span>
							<div v-if="item in scope.row['单元格状态']">
	
								<div v-if="scope.row['整行状态'] == 1">
									<span class="color" style="border-color: #FF591F #FF591F transparent transparent;"></span>
									<span class="tips" style="display:none;left:0px" v-if="item == lastTitle">
										<span v-if="scope.row['单元格状态'][item] == 1">！数据空值异常</span>
										<span v-if="scope.row['单元格状态'][item] == 2">！数据类型异常</span>
										<span v-if="scope.row['单元格状态'][item] == 3">！数值最值异常</span>
										<span v-if="scope.row['单元格状态'][item] == 4">！数据下边界异常</span>
										<span v-if="scope.row['单元格状态'][item] == 5">！数据上边界异常</span>
										<span v-if="scope.row['单元格状态'][item] == 6">！未定义异常</span>
									</span>
									<span class="tips" style="display:none;" v-else>
										<span v-if="scope.row['单元格状态'][item] == 1">！数据空值异常</span>
										<span v-if="scope.row['单元格状态'][item] == 2">！数据类型异常</span>
										<span v-if="scope.row['单元格状态'][item] == 3">！数值最值异常</span>
										<span v-if="scope.row['单元格状态'][item] == 4">！数据下边界异常</span>
										<span v-if="scope.row['单元格状态'][item] == 5">！数据上边界异常</span>
										<span v-if="scope.row['单元格状态'][item] == 6">！未定义异常</span>
									</span>
								</div>

								<div v-if="scope.row['整行状态'] == 2">
									<span class="color" style="border-color: #FBE800 #FBE800 transparent transparent;"></span>
									<span class="tips" style="display:none;left:-106px" v-if="item == lastTitle">
										<span>异常已被忽略</span>
									</span>
									<span class="tips" style="display:none;" v-else>
										<span>异常已被忽略</span>
									</span>
								</div>

							</div>
						</div>
				</template>
				</el-table-column>
		</el-table>
		<div class="page">
			<div class="colorTips">
				<div class="red">
					<span></span>
					<span>数据异常</span>
				</div>
				<div class="yellow">
					<span></span>
					<span>已忽略</span>
				</div>
			</div>  
			<el-pagination
				layout="prev, pager, next"
				@current-change="changePage"
				:page-size="100"
				:current-page.sync="currentPage"
				style="float:right;margin-right:20px"
				:total = "totalNum">
			</el-pagination>
		</div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import axios from 'axios' 
  export default {
    data () {
      return {
        showId: "",
        pageNum: 1,
        sheetKey: 0,
        disabled: false,
        totalNum: 0,
        lastTitle: "", //保存最后一个标题，用来改变最后一个弹窗位置。
        tableData2: [],
        titleList: [],
		btnList: [],
		key: 0,
		index: '',
		currentPage: 1
      }	
    },
    created () {
      this.showId = this.$route.params.id;
      this.showInfoList(0);
    },
    mounted() {
		this.maxWidth = document.body.clientWidth - 200 + "px";
		const _this = this;
		window.onresize = function temp() {
			_this.maxWidth = document.body.clientWidth - 200 + "px";
		};

		$(".preview_container").on("mouseover", "td", function() {
			$(this).find(".tips").css("display", 'block')
		}).
		on("mouseout", "td", function() {
			$(this).find(".tips").css("display", 'none')
		})
	},
    methods:{
    	changePage(val) { //切换分页 渲染数据
				if (!this.key) {
					this.key = 0;
				}
				this.pageNum = val;
				this.showInfoList(this.key, this.index);
				this.disabled = false;
				this.isShowEdit = true;

				if(this.tableData3 == JSON.stringify(this.tableData2)){
					return;
				}

				this.colseError();  //关闭弹窗
				var arr = [];
				this.tableData2.forEach(function(item, index) {
					var obj = {};
					obj.rowname = item.rowname;
					obj.mysql = item;
					delete obj.mysql.rowname;
					arr.push(obj)
				})
				var qs = require('qs');
				var self = this;
				axios.post('/service', qs.stringify({
						"data": JSON.stringify({
							command: 'updateDataUpload',
							platform: 'web',
							// userId: getCookie("userId"),
							id: self.showId,
							pageNum: self.pageNum,
							sheetKey: this.key,
							title: self.titleList,
							valueData: arr
						})
					}))
					.then(function(response) {
						console.log(response);
						if (response.status === 200) {
							if(response.data.statusCode == '10003'){
                self.$router.push('/')
								// window.location.replace("http://hospital.tzucpa.cn/data/#/login");	
								// window.location.replace("http://172.16.2.218/data/#/login");	
              }
							if (response.data.code == 10001) {
								showTips("保存成功", self);
							} else {
								showTips("保存失败", self);
							}
						}
					}).catch(function(error) {
						console.log(error);
					});
			},
      showInfoList(key,index) { //展示渲染数据。
				var qs = require('qs');
				var self = this;
				axios.post('/service', qs.stringify({
						"data": JSON.stringify({
							command: 'lookDataUpload',
							platform: 'web',
							id: self.showId,
							pageNum: self.pageNum,
							sheetKey: key
						})
					}))
					.then(function(response) {
						if (response.status === 200) {
							if (response.data.code == 10001) {
								/**
								 * 表题的设置开始
								 */
								response.data.data.sheet.forEach(function(item, index) {
									item.color = "#4A4A4A";
									item.backgroundColor = "#fff";
								})
								self.btnList = response.data.data.sheet; //赋值标题
								if (self.key == 0) {  //给选中的标题赋与不同的样式。
									self.btnList.forEach((item) => {
										item.backgroundColor = "#fff";
										item.width = "";
									})
									self.btnList[0].backgroundColor = "#C7E3EE";
									self.btnList[0].width = "300px";
								} else {
									self.btnList.forEach((item) => {
										item.backgroundColor = "#fff";
										item.width = "";
									})
									self.btnList[index].backgroundColor = "#C7E3EE";
									self.btnList[index].width = "300px";
								}
								/**
								 * 表题的设置结束
								 */
					self.totalNum = response.data.data.totalNum			
                self.titleList = response.data.data.title;
                self.titleList.unshift("#");

                setTimeout(function() { //用来延迟渲染，修复渲染不全的问题。
									self.tableData2 = [];
									response.data.data.valueData.forEach(function(item, index) {
										item.mysql.rowname = item.rowname;
										item.mysql["#"] = index + 1;
										self.tableData2.push(item.mysql)
									})
								}, 1)
							} else {

							}
						}
					}).catch(function(error) {
						console.log(error);
					});
      },
      cellStyle({row,column,rowIndex,columnIndex}) {
				return {
					position: "position"
				}
      },
			liChoose(item, index) { //表名切换
				this.btnList.forEach((item) => {
					item.backgroundColor = "#fff";
					item.width = "";
				})
				this.btnList[index].backgroundColor = "#C7E3EE";
				this.btnList[index].width = "300px";
				this.key = item.key;
				this.index = index;
				this.pageNum = 1;
				this.currentPage = 1;
				this.showInfoList(this.key, this.index)
			},
    }
  }
</script>
<style lang="scss" scoped>
	.preview_container{
		width: 100%;
		height: 100%;
	}
	.preview_container_top{
			// width: calc(94% - 60px);
			width: 100%;
			height: 60px;
			line-height: 60px;
			width: 94% !important;
			margin: 0 auto;
			display: flex;
			span {
				// display: inline-block;
				padding: 0px 16px;
				height: 60px;
				font-family: PingFangSC-Medium;
				font-size: 15px;
				color: #4A4A4A;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				/*加宽度width属来兼容部分浏览*/
				background-color: #fff;
				border-right: 1px solid #ebeef5;
			}
			span:hover {
				cursor: pointer;
				width: 300px;
				background-color: rgb(199, 227, 238) !important;
			}
	}

	.el-table{
		width: 94% !important;
		margin: 0 auto;
	}

	.page {
		background-color: #fff;
		width: 94% !important;
		margin: 0 auto;
		height: 40px;
		line-height: 40px;
		border-bottom: solid 1px #ebeef5;
		padding-top: 14px;
		display: flex;
		justify-content: space-between;
		.colorTips {
			display: flex;
			margin-left: 37px;
			.red {
				margin-right: 50px;
				span:first-child {
					display: inline-block;
					width: 10px;
					height: 10px;
					border-radius: 50%;
					background-color: #FF591F;
					margin-right: 11px;
				}
			}
			.yellow {
				span:first-child {
					display: inline-block;
					width: 10px;
					height: 10px;
					border-radius: 50%;
					background-color: #FBE800;
					margin-right: 11px;
				}
			}
		}
	}
	.tips {
		color: red;
		position: absolute;
		right: 0px;
		top: 0;
		width: 106px;
		height: 31px;
		padding-top: 8px;
		opacity: 0.6;
		background: #000000;
		z-index: 999;
		font-family: '微软雅黑';
		font-size: 12px;
		color: #FFFFFF;
		text-align: center;
		border-radius: 6px;
	}
	.color {
		position: absolute;
		right: 0px;
		top: 0;
		width: 0;
		height: 0;
		border-width: 6px;
		border-style: solid;
		border-color: #FF591F #FF591F transparent transparent;
	}
	.IdentificationInfo{
		position: absolute;
	  left:0;
		top: 30%;
		width: 100%; 
		height: 100%;
		font-family: PingFangSC-Regular;
		font-size: 15px;
		color: #333333;
		z-index: 8;
	}

	.IdentificationColor{
		position: absolute;
		left:0;
		top: 0;
		width: 100%; 
		height: 100%;
		// background-color: #FF591F;
		z-index: 6;
	}
</style>
